<template>
  <div>
    <vs-card type="4" @click="view()">
      <template #title>
        <h3>
          {{ gallery.title.String }}
        </h3>
        <i
          class="bx bx-tag"
          v-for="tag in gallery.tags"
          :key="tag"
          style="color: pink"
        >
          {{ tag.name ? tag.name : tag }}
        </i>
      </template>
      <template #img>
        <img v-lazy="gallery.images[0]" alt="Placeholder image" />
      </template>
      <template #text>
        <p style="padding: 0px 10px 15px 0px">
          <time datetime="2016-1-1" style="float: right">
            {{ gallery.date.Time | dateformat('MM月DD日')}}
          </time>
        </p>
    </template>
    <template #interactions>
        <!-- <vs-button danger icon flat :active="likeActive == true" @click.stop="like()"> -->
        <vs-tooltip
          :delay="500"
        >
          <vs-button danger icon>
          <i class="bx bx-heart"
            @mouseover="lovecount()"
            @click="like()"
          ></i>
          <!-- <span class="span">
              {{ gallery.nice.Int32 }}
            </span> -->
          </vs-button>
          <template #tooltip>
            {{lovenum}}
          </template>
        </vs-tooltip>
        <vs-button
          icon
          color="black"
          v-if="test((count - 1) * 3)"
          @click="del((count - 1) * 3)"
        >
          <i class="bx bx-message-square-x"></i>
        </vs-button>
        <vs-button class="btn-chat" shadow primary @click="zone(gallery.userid)">
          <i class="bx bx-user"></i>
          <span class="span">
            {{ gallery.username.String }}
          </span>
        </vs-button>
      </template>
    </vs-card>
  </div>
</template>

<script>
export default {
  name: "galleryCard",
  data() {
    return {
      likenum: 0,
      gallery: [],
      gid: this.id,
      likeActive: false,
    };
  },
  props: {
    id: String,
  },
  methods: {
    //look
    view() {
      this.$router.push({
        name: "Gallery",
        query: {
          gid: this.gid,
        },
      });
    },
    //active
    test(count) {
      if (this.gallery[count].userid == localStorage.getItem("uid")) {
        return true;
      }
      if (
        localStorage.getItem("level") == "admin" ||
        localStorage.getItem("level") == "root"
      ) {
        return true;
      }
      return false;
    },
    zone(uid){
      this.$router.push({
        path:"/zone",
        query:{
          uid:uid,
        },
      });
    },
  },
  //主页加载所有图片
  async created() {
    this.$http
      .get("/go/pic/view/" + this.gid, {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      })
      .then(
        (response) => {
          this.gallery = response.data.data;
        },
        (response) => {
          console.log("err");
        }
      );
  },
  async lovecount() {
    let res = await this.$http.get("/api/gallery/niceCount", {
      params: {
        gid: this.gid,
      },
      headers: {
        pass: "",
        Authorization: "Bearer " + (await localStorage.getItem("token")),
      },
    });
    console.log(res.data);
    if (res.data.status == 40000) {
      this.likenum = "0";
    } else if (res.data.status == 20000) {
      this.likenum = res.data.nice.toString();
    }
  },
  async like() {
    let res = await this.$http.post(
      "/api/gallery/niceJob",
      {},
      {
        params: {
          gid: this.gid,
        },
        headers: {
          pass: "",
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }
    );
    console.log(res.data);
    if (res.data.status == 40000) {
      this.$vs.notification({
        title: "不要重复点赞",
      });
    } else if (res.data.status == 20000) {
      this.$vs.notification({
        title: "点赞成功",
      });
    }
  },
  async del(count) {
    let temp = await this.$http.delete(
      "/go/pic/del/" + this.gallery[count].gid,
      {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      }
    );
    console.log(temp.data);
    if (temp.data.status != 20000) {
      this.$vs.notification({
        title: "删除有问题",
      });
    }
    temp = await this.$http.delete(
      "/api/gallery/delete/" + this.gallery[count].gid,
      {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      }
    );
    console.log(temp.data);
    if (temp.data.status == 20000) {
      this.$vs.notification({
        title: "删除成功",
      });
    }
  },

};
</script>

<style>
:root {
  break-inside: avoid;
}
.vs-card__text {
  width: 100% !important;
}
.vs-card-content.type-4 .vs-card {
  max-width: 60vh !important;
}
</style>